.IFlytek {
    $left-width: 120px;
    $rtop-hight: 48px;
    $rtop2-hight: 30px;
    height: calc(100vh - $rtop-hight - $rtop2-hight);
    overflow-y: auto;
    display: flex;
    justify-content: center;

    &>.IFlytek-toggle {
        position: relative;
        margin-top: 20px;
        width: 30px;

        &>.toggle-circle {
            position: absolute;
            z-index: 1;
            min-width: 30px;
            top: 0;
            transition: all 0.3s;
        }

        &>.toggle-content {
            position: absolute;
            width: 100%;
            border-radius: 30px;
            outline: 1px solid #fc5185;
            overflow: hidden;
            transition: all 0.3s;
            opacity: 0;

            &>.tc-Item {
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            :nth-child(2) {
                border-top: 2px solid #d7d7d7;
                border-bottom: 2px solid #d7d7d7;
            }

            &>.tc-Item:hover {
                background-color: #f2f2f2;
            }

            &>.tc-Item-active {
                background-color: #f2f2f2;
            }
        }
    }

    &>.IFlytek-content {
        position: relative;
        top: 0;
        width: 60%;
        display: flex;
        justify-content: center;


        &>.IFlytek-main {
            width: 100%;

            .IFlytek-dialog {
                margin-top: 20px;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;

                &>.dialog-ask {
                    width: 80%;
                    margin-bottom: 30px;

                    &>.dialogAsk-top {
                        display: flex;
                        align-items: center;
                        margin-bottom: 20px;

                        &>.dialogAsk-img {
                            height: 40px;
                            width: 40px;
                            border-radius: 50%;
                            margin-right: 10px;
                        }

                        &>span {
                            font-weight: 600;
                        }
                    }

                    &>.dialogAsk-content {
                        white-space: 'pre-wrap';
                        line-height: 28px;
                        font-family: NSimSun;
                    }
                }

                &>.dialog-answer {
                    width: 80%;
                    margin-bottom: 40px;

                    &>.dialogAnswer-top {
                        display: flex;
                        align-items: center;
                        margin-bottom: 20px;

                        img {
                            width: 40px;
                            height: 40px;
                        }

                        &>span {
                            font-weight: 600;
                            margin: 0 5px;
                        }
                    }

                    &>.answer-content {
                        line-height: 28px;
                        font-family: NSimSun;
                    }
                }
            }

            :last-child {
                .dialog-answer {
                    margin-bottom: 100px;
                }
            }
        }


        &>.introduce {
            width: 100%;
            height: 80%;
            display: flex;
            align-content: center;
            justify-content: center;
            flex-wrap: wrap;

            &>.introduce-top {
                width: 80%;
                display: flex;
                justify-content: center;
                margin-bottom: 50px;

                &>img {
                    width: 80px;
                    height: auto;
                }
            }

            &>.introduce-content {
                display: flex;
                justify-content: space-between;
                width: 80%;

                &>div {
                    cursor: pointer;
                    height: 120px;
                    width: 180px;
                    border: 1px solid #ccc;
                    border-radius: 20px;
                    padding: 10px;
                    overflow: hidden;
                    /* 隐藏溢出的文本 */
                    text-overflow: ellipsis;
                    /* 显示省略号 */
                }

                &>div:hover {
                    background-color: #f9f9f9;
                }
            }
        }

        .IFlytek-input {
            position: fixed;
            bottom: 0px;
            z-index: 999;
            width: 62vw;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            &>.IFlytek-text {
                display: flex;
                width: 80%;
                border-radius: 10px;
                overflow: hidden;
                background-color: #f5f5f5;

                &>.IFlytek-textArea {
                    width: 100%;
                    padding: 15px;
                    border: none;
                    background-color: #f5f5f5;
                    font-family: PingFang SC;
                }

                ::-webkit-scrollbar {
                    width: 0;
                    height: 0;
                }

                .ant-input:focus {
                    box-shadow: none;
                }

                &>.IFlytekInput-icon {
                    margin: 0 10px;
                    margin-top: 6.8px;
                }

            }

            &>.IFlytek-input-bottom {
                display: flex;
                width: 80%;
                height: 24px;
                font-size: 14px;
                color: #b0b7c0;
                background-color: #fff;
                justify-content: center;
                align-items: center;
            }
        }
    }

    &>.IFlytek-proImg {
        width: 60%;
        margin-top: 20px;
        padding-left: 50px;

        &>.proImg-title {
            font-size: 60px;
            font-weight: 700;
            color: #dcdbdb;
            font-family: STKaiti;
            position: relative;
            margin-bottom: 20px;
        }

        &>.proImg-title::before {
            content: '图片生成';
            position: absolute;
            color: #000;
            z-index: -1;
            filter: blur(1px);
            mask-image: linear-gradient(transparent, #000);
            transform: translate(-15px, 10px) scaleY(0.5) skew(30deg);
        }

        &>.proImg-content {
            width: 100%;

            &>p {
                margin-bottom: 20px;
            }

            &>.proImg-input {
                display: flex;
            }
        }

        .proImg-img {
            margin-top: 50px;

            &>img {
                width: auto;
                height: 300px;
            }
        }
    }

    &>.IFlytek-comImg {
        width: 60%;
        margin-top: 20px;
        padding-left: 50px;

        &>.comImg-title {
            font-size: 60px;
            font-weight: 700;
            color: #dcdbdb;
            font-family: STKaiti;
            position: relative;
            margin-bottom: 20px;
        }

        &>.comImg-title::before {
            content: '图片理解';
            position: absolute;
            color: #000;
            z-index: -1;
            filter: blur(1px);
            mask-image: linear-gradient(transparent, #000);
            transform: translate(-15px, 10px) scaleY(0.5) skew(30deg);
        }

        &>.comImg-content {
            width: 100%;
        }
    }
}

.ant-input-affix-wrapper .ant-input-prefix {
    margin-inline-end: 5px;
}

.wrapper {
    width: 200px;
    height: 60px;
    margin: 100px 0 0 80px;
    transform: translate(-50%, -50%);
}

.circle {
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50%;
    background-image: linear-gradient(transparent, #ccc);
    left: 15%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle {
    0% {
        top: 60px;
        height: 5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }

    40% {
        height: 20px;
        border-radius: 50%;
        transform: scaleX(1);
    }

    100% {
        top: 0%;
    }
}

.circle:nth-child(2) {
    left: 45%;
    animation-delay: .2s;
}

.circle:nth-child(3) {
    left: auto;
    right: 15%;
    animation-delay: .3s;
}

.shadow {
    width: 20px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    top: 62px;
    transform-origin: 50%;
    z-index: -1;
    left: 15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow {
    0% {
        transform: scaleX(1.5);
    }

    40% {
        transform: scaleX(1);
        opacity: .7;
    }

    100% {
        transform: scaleX(.2);
        opacity: .4;
    }
}

.shadow:nth-child(4) {
    left: 45%;
    animation-delay: .2s
}

.shadow:nth-child(5) {
    left: auto;
    right: 15%;
    animation-delay: .3s;
}

.wrapper span {
    position: absolute;
    top: 80px;
    font-size: 20px;
    color: #454545;
    left: 15%;
    font-weight: 600;
}

.ant-rate {
    color: #67c23a;
}